<template>
	<view class="container">
		<view class="flex   justify-center">
			<view class="UCenter-bg margin-top-xxxl" style='background-image:url("https://www.hozenn.com/iot/logo/logo_xmh.png")'>
			</view>
		</view>
		<view class='form-box'>

			<form class="">

				<view class=" padding-xs flex align-center">
					<view class="flex-sub ">
						<view class=" text-xl padding text-center">
							<text class="text-grey text-xxl text-bold ">请输入账号密码登录</text>
						</view>
						<!-- <view class="padding text-gray">页面大标题，用于结果页等单一信息页</view> -->
					</view>
				</view>

				<view class="cu-form-group margin-top round">
					<text class="cuIcon-people text-grey "></text>
					<input class="cus-input" placeholder-class="phcolor" placeholder="账号/手机号码" v-model="userid" name="userid" maxlength="50"></input>
				</view>

				<view class="padding-xs"></view>
				<view class="cu-form-group margin-top round">
					<text class="cuIcon-keyboard text-grey"></text>
					<input class="cus-input" type="password" placeholder-class="phcolor" placeholder="密码" v-model="pwd" name="pwd" maxlength="18"></input>
				</view>

				<button @tap="login()" class="round cu-btn block login-btn margin-tb-lg margin-lr-xs lg"><text>
						登录</text> </button>

			</form>
		</view>
	</view>
</template>
<script>
	import * as api from '../../common/api.js';
	import md5 from '@/js_sdk/js-md5/src/md5.js'
	export default {
		data() {
			return {
				userid: '', //用户id
				pwd: '' //密码
			};
		},
		onLoad() {},
		methods: {
			//当前登录按钮操作
			login() {
				var that = this;
				/*if (!that.phone) {
					uni.showToast({ title: '请输入您的手机号', icon: 'none' });
					//return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.showToast({ title: '请输入正确手机号', icon: 'none' });
					//return;
				}
				*/
				if (!that.userid) {
					uni.showToast({
						title: '请输入您的账号',
						icon: 'none'
					});
					return;
				}
				if (!that.pwd) {
					uni.showToast({
						title: '请输入您的密码',
						icon: 'none'
					});
					return;
				}

				api.myRequest({
					url: '/Api/Login',
					method: 'POST',
					data: {
						"userid": that.userid,
						"password": that.pwd,
					},
				},false).then(res => {
					console.debug(res)
					if (res.code == 200) {
						// uni.showToast({
						// 	title: '登录成功！',
						// 	icon: 'none'
						// });
						//getApp().globalData.pda_id = res.data
						//console.info(getApp().globalData.pda_id)
						try {
							uni.setStorageSync('token', res.token);
							uni.setStorageSync('userid', res.userid);
						} catch (e) {
							console.error(e)
						}
						
						uni.$emit('login', {
							msg: 'login...'
						})

						that.getUserInfo();
						
					} else {
						uni.showModal({
							title: "失败",
							content: "账号/密码错误,请重新输入",
							showCancel: false,
							confirmText: "确定"
						})
					}
					
				}).catch(err => {
					console.log(err)
				})

			},
			
			getUserInfo(){
				var userid,token
				try {
					userid = uni.getStorageSync('userid');
					token = uni.getStorageSync('token');
					if (userid && token) {
						console.log(userid,token);
					}
				} catch (e) {
					// error
				}
				api.myRequest({
					url: '/Api/User/Info',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization':'Bearer ' + token + ''
					},
					data: {},
					
				},false).then(res => {
					console.debug(res)
					if (res.code >= 0) {
					
						//getApp().globalData.user = res.data
						//console.info(getApp().globalData.user)
						try {
							uni.setStorageSync('userinfo', JSON.stringify(res.data));
							uni.$emit('userinfo_update',{msg:'userinfo更新'})
						} catch (e) {
							console.error(e)
						}

						setTimeout(function(){
							uni.switchTab({
								url: '/pages/tabbar/topo/topo'
							});
						},1000)
						
					} else {
						uni.showModal({
							title: "失败",
							content: res.msg,
							showCancel: false,
							confirmText: "确定"
						})
					}
					
				}).catch(err => {
					console.log(err)
				})
			}
		}
	};
</script>
<style>
	.page {
		background-color: #ffffff;
		height: 100vh;
	}

	.container {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/* background-image: url("https://www.hozenn.com/iot/img/bg1.png"); */
		background-color: #ffffff;
		background-size: 100% 100%;
		/* filter: blur(2rpx); */
		overflow: hidden;
		/* filter: blur(2rpx); */

	}

	.UCenter-bg {
		/* background-image: url("../../../images/profile.jpeg"); */
		background-size: cover;
		height: 200rpx;
		width: 460rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}
	
	.form-box {
		width: 83.3%;
		margin: 0 auto;
		margin-top: 10%;
		float: none;
		background-color: transparent;
	}
	
	.cu-form-group {
		/* background-color: var(--white); */
		background-color: rgba(150, 150, 150, 0.1);
		/* color: #fff; */
		padding: 1rpx 30rpx;
		display: flex;
		align-items: center;
		min-height: 90rpx;
		justify-content: space-between;
		margin: 10rpx;
		/* background-color: #000000aa; */
	}
	
	.cu-form-group+.cu-form-group {
		border-top: 1rpx solid #eee;
	}
	
	.phcolor {
		color: #aaaaaa !important;
	}
	
	.cus-input {
		color: #333333 !important;
	}
	
	.login-btn {
		/* background-color: rgba(80, 87, 185, 0.596) !important; */
		color: #ffffff;
		/* background: linear-gradient(135deg, #5a9cff 0%, #3c7cff 100%); */
		background-color: #4060ee !important;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(60, 124, 255, 0.3);
	}
	.cu-form-group>text[class*="cuIcon-"] {
		font-size: 36rpx;
		padding: 10rpx;
		box-sizing: border-box;
		padding-right: 20rpx;
	}
</style>